<template>
  <div>
    <tabComponent :tabtitle='tabData.title' :markType='markType' @classSelect='classSelect' :tabDataHeader='tabData.header' @tabSelect='tabSelect'>
      <div slot='select1'>
        <mt-index-list>
          <mt-index-section v-for="(site,index) in siteData1" :key="index" :index="site">
            <div class="main" v-for="(item,index) in showData1" v-if="item.sortName==site">
              <div class="flex">
                <div class="head" @click="showDetail(index,1)">
                  <img :src="$api.formatterImg(item.studentPhoto)" />
                </div>
                <div class="classroom" @click="showDetail(index,1)">
                  <div class="className">{{item.studentName}}</div>
                  <div class="teacher">{{item.className}}</div>
                </div>
              </div>
              <div class="right" v-if="type=='3'&&useInfo.tsMenuList[1].voOperate.editObj">
                <mt-button type="danger" @click="normalOrOut(item.classStudentId,2)" size="small">退班</mt-button>
              </div>
              <!-- <div @click="$api.tell(item.phone)" class="tell_phone"></div> -->
            </div>
          </mt-index-section>
        </mt-index-list>
      </div>
      <div slot='select2' v-if="this.markType != '1'">
        <mt-index-list>
          <mt-index-section v-for="(site,index) in siteData2" :key="index" :index="site">
            <div class="main" v-for="(item,index) in showData2" v-if="item.sortName==site">
              <div class="flex">
                <div class="head" @click="showDetail(index,2)">
                  <img :src="item.studentPhoto" />
                </div>
                <div class="classroom" @click="showDetail(index,2)">
                  <div class="className">{{item.studentName}}</div>
                  <div class="teacher">{{item.className}}</div>
                </div>
              </div>
              <div class="right" v-if="type=='3'&&useInfo.tsMenuList[1].voOperate.editObj">
                    <mt-button type="primary" @click="normalOrOut(item.classStudentId,1)" size="small">正常</mt-button>
                    <mt-button type="danger" @click="normalOrOut(item.classStudentId,2)" size="small">退班</mt-button>
              </div>
              <!-- <div @click="$api.tell(item.phone)" class="tell_phone"></div> -->
            </div>
          </mt-index-section>
        </mt-index-list>
      </div>
      <div slot='select3'>
        <mt-index-list>
          <mt-index-section v-for="(site,index) in siteData3" :key="index" :index="site">
            <div class="main" v-for="(item,index) in showData3" v-if="item.sortName==site">
              <div class="flex">
                <div class="head">
                  <img :src="$api.formatterImg(item.studentPhoto)" />
                </div>
                <div class="classroom">
                  <div class="className" @click="showDetail(index,3)">{{item.studentName}}</div>
                  <div class="teacher" @click="showDetail(index,3)">{{item.className}}</div>
                </div>
              </div>
              <div class="right" v-if="type=='1'||type=='2'||type=='4'">
                  <!-- 1午托2晚托4课程 -->
                <mt-button type="default" v-if="markType!=1" @click="qiandaoOrqingjia(item,2)" size="small" style="margin:0 0.3rem;">请假</mt-button>
                <mt-button type="primary" v-if="markType!=1" @click="qiandaoOrqingjia(item,1)" size="small">签到</mt-button>
                <mt-button type="primary" v-if="markType==1" @click="qiandaoOrqingjia(item,3)" size="small">签退</mt-button>
              </div>
              <!-- <div @click="$api.tell(item.phone)" class="tell_phone"></div> -->
            </div>
          </mt-index-section>
        </mt-index-list>
      </div>
    </tabComponent>
  </div>

</template>


<script>
    import {
        MessageBox
    } from 'mint-ui';
    import tabComponent from './tabComponent/tabComponent'
    export default {
        components: {
            tabComponent
        },
        data() {
            return {
                useInfo: '',
                selected: '1',
                markType: null, //存储签到还是签退,0为签到,1为签退
                showData1: [],
                showData2: [],
                showData3: [],
                pageSize: 100000,
                type: '',
                url: '', //存储获取数据的接口地址
                addUrl: '', //存储签到或者请假的接口
                classId: '', //存储班级ID
                tabData: {
                    title: '签到详情',
                    header: ['已签到', '已请假', '未签到']
                }
            }
        },
        methods: {
            showDetail(index, select) {
                if (index || index == 0) {
                    var studentId = this['showData' + select][index].studentId;

                    sessionStorage.setItem("studentId", studentId);
                } else {
                    sessionStorage.removeItem("studentId");
                }
                this.$api.removeCookie('studentDetail');
                this.$router.push({
                    path: 'studentDetail'
                })
            },
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getMarkType() {
                this.markType = sessionStorage.getItem('markType');
                if (!this.markType && this.markType != 0) {
                    this.classId = sessionStorage.getItem('classId')
                }
            },
            getInfo1() { //
                var url = this.url
                var params = {
                    markType: this.markType,
                    markFlag: this.markType == '1' ? 3 : 1,
                    classId: this.classId,
                    isFlag: 1,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                    stuStatus: 1, //正常
                }
                this.$api.post(url, params, (data) => {
                    console.log(JSON.parse(JSON.stringify(data)))
                    this.showData1 = data.info.list;
                })
            },
            getInfo2() { //
                var url = this.url
                var params = {
                    markType: this.markType,
                    markFlag: 2,
                    isFlag: 1,
                    pageSize: this.pageSize,
                    classId: this.classId,
                    schoolId: this.useInfo.schoolId,
                    stuStatus: 3, //欠费
                }
                this.$api.post(url, params, (data) => {
                    console.log(JSON.parse(JSON.stringify(data)))
                    this.showData2 = data.info.list;
                })
            },
            getInfo3() { //
                var url = this.url
                var params = {
                    markType: this.markType,
                    isFlag: 1,
                    pageSize: this.pageSize,
                    classId: this.classId,
                    schoolId: this.useInfo.schoolId,
                    stuStatus: 2, //退班
                }
                switch (this.type) {
                    case '1':
                        url = "/noonMark/selectPage";
                        break;
                    case '2':
                        url = "/nightMark/selectPage";
                        break;
                    case '3':
                        this.$api.post(url, params, (data) => {
                            this.showData3 = data.info.list;
                        })
                        return;
                        break;
                    case '4':
                        url = "/lessonMark/selectPage";
                        break;
                }

                this.$api.post(url, params, (data) => {
                    console.log(JSON.parse(JSON.stringify(data)))
                    this.showData3 = data.info.page.list;
                })
            },
            normalOrOut(studentId, stuStatus) { //退班
                var url = "student/updateStuentState"
                var params = {
                    classStudentId: studentId,
                    stuStatus,
                }
                var msg = ''
                if (stuStatus == 1) {
                    msg = '是否确定将状态改为正常?'
                } else if (stuStatus == 2) {
                    msg = '是否确定要退班?'
                }
                MessageBox.confirm(msg).then(o => {
                    this.$api.post(url, params, (data) => {
                        MessageBox('提示', '操作成功');
                        this.getInfo2();
                    })
                }).catch(e => {

                })

            },
            getCheckStudentId() { //获取选中的学生id
                var array = []
                this.showData.forEach(element => {
                    if (element.checked) {
                        array.push({
                            studentId: element.studentId,
                            classId: element.classId
                        });
                    }
                });
                return array;
            },
            qiandaoOrqingjia(student, markFlag) { //签到或者请假,markFlag 1 签到 2 请假 3签退
                var array = [];
                var studentIds = '';
                if (student) { //单个签到
                    array.push({
                        studentId: student.studentId,
                        classId: student.classId
                    });
                } else { //多个签到
                    array = this.getCheckStudentId();
                }
                var url = this.addUrl
                var params = {
                    schoolId: this.useInfo.schoolId,
                    markUserId: this.useInfo.userId,
                    markFlag: markFlag,
                    markType: this.markType,
                    studentIds: JSON.stringify(array),
                }
                this.$api.post(url, params, (data) => {
                    this.getInfo3();
                    MessageBox('提示', '操作成功');

                })
            },
            tabSelect(val) {
                this.selected = val;
                switch (this.selected) {
                    case '1':
                        this.getInfo1();
                        break;
                    case '2':
                        this.getInfo2();
                        break;
                    case '3':
                        this.getInfo3();
                        break;
                }
            },
            classSelect(val) {
                this.classId = val;
                switch (this.selected) {
                    case '1':
                        this.getInfo1();
                        break;
                    case '2':
                        this.getInfo2();
                        break;
                    case '3':
                        this.getInfo3();
                        break;
                }
            },
            getUrl() { //获取接口地址
                var type = sessionStorage.getItem('studentListType'); //1午托,2晚托,3班级详情,4课程点名
                this.type = type;
                switch (type) {
                    case '1':
                        console.log("午托");
                        this.url = "/noonMark/selectOverPage" //如果是午托
                        this.addUrl = "/noonMark/add"
                        if (this.markType == '1') {
                            this.tabData = {
                                title: '签退详情',
                                header: ['已签退', '已请假', '未签退']
                            }
                        }
                        break;
                    case '2':
                        console.log("晚托");
                        this.url = "/nightMark/selectOverPage" //如果是晚托
                        this.addUrl = "/nightMark/add"
                        if (this.markType == '1') {
                            this.tabData = {
                                title: '签退详情',
                                header: ['已签退', '已请假', '未签退']
                            }
                        }
                        break;
                    case '3':
                        console.log('班级详情')
                        this.url = "/student/selectPageAllData" //如果是班级详情
                        this.tabData = {
                            title: '班级学生',
                            header: ['正常', '欠费', '退班']
                        }
                        break;
                    case '4':
                        console.log("课程点名");
                        if (this.markType == '1') {
                            this.tabData = {
                                title: '签退详情',
                                header: ['已签退', '已请假', '未签退']
                            }
                        }
                        this.url = "/lessonMark/selectOverPage" //如果是晚托
                        this.addUrl = "/lessonMark/add"
                        break;
                }
            },
            getAddStudentList() {
                var selectStudentList = JSON.parse(sessionStorage.getItem('selectStudentList'));
                var params = {
                    classId: sessionStorage.getItem('classId'),
                }
                if (selectStudentList) {
                    var str = '';
                    selectStudentList.forEach(element => {
                        str = str + element.studentId + ','
                    });
                    params.studentIds = str;
                    var url = '/class/addClassStudent';
                    this.$api.post(url, params, (data) => {
                        this.$api.removeCookie('selectStudentList');
                        MessageBox('提示', '添加成功');
                        this.getInfo1();
                    })
                }
                return;
            }
        },
        computed: {
            siteData1: function() {
                var array = [];
                let AllZiMu = this.showData1.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            },
            siteData2: function() {
                var array = [];
                let AllZiMu = this.showData2.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            },
            siteData3: function() {
                var array = [];
                let AllZiMu = this.showData3.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            },

        },
        created() {
            this.getMarkType();
            this.getUrl();
            this.getUserInfo();
            this.getInfo1();
            this.getAddStudentList();
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .select_class .mint-navbar {
        background: white;
        color: #A5A5A5;
    }
    
    .select_class .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.1rem solid #74beff;
        color: #0489ff;
        margin-bottom: 0px;
    }
</style>